<template>
  <div class="image-box" :style="{ backgroundImage: `url(${item.bg})` }" style="position: relative;">
    <!-- 播放按钮 -->
    <div class="play-btn" @click="showVideo = true">
      <svg viewBox="0 0 64 64" width="48" height="48">
        <circle cx="32" cy="32" r="32" fill="rgba(0,0,0,0.4)"/>
        <polygon points="26,20 48,32 26,44" fill="#fff"/>
      </svg>
    </div>
    <!-- 自定义视频弹窗（仅在父容器内居中显示） -->
    <div v-if="showVideo" class="custom-dialog">
      <div class="custom-dialog-mask" @click="showVideo = false"></div>
      <div class="custom-dialog-content">
        <video :src="item.url" controls autoplay style="width:100%;height:100%;aspect-ratio:9/16;background:#000;border-radius:12px;"></video>
        <div class="close-btn" @click="showVideo = false">×</div>
      </div>
    </div>
    <!-- 顶部栏 -->
    <div class="image-box-topbar">
      <div class="topbar-left">
        <el-icon><Menu /></el-icon>
      </div>
      <div class="topbar-center">
        <span class="topbar-text">热点</span>
        <span class="topbar-text">关注</span>
        <span class="topbar-text">推荐</span>
      </div>
      <div class="topbar-right">
        <el-icon><Search /></el-icon>
      </div>
    </div>
    <!-- 右侧操作栏 -->
    <div class="image-box-actions">
      <img class="avatar" :src="item.avatar" alt="头像" />
      <div class="action-btn">
        <el-icon><Pointer /></el-icon>
        <span>{{ item.likes }}</span>
      </div>
      <div class="action-btn">
        <el-icon><ChatDotRound /></el-icon>
        <span>{{ item.comments }}</span>
      </div>
      <div class="action-btn">
        <el-icon><Star /></el-icon>
        <span>{{ item.favorites }}</span>
      </div>
      <div class="action-btn">
        <el-icon><Share /></el-icon>
        <span>{{ item.shares }}</span>
      </div>
    </div>
    <!-- 底部信息栏 -->
    <div class="image-box-bottom">
      <div class="bottom-left">
        <div class="author">@{{ item.author }}</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
      <div class="bottom-avatar">
        <img class="avatar" :src="item.avatar" alt="头像" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
import { Menu, Search, Pointer, ChatDotRound, Star, Share } from '@element-plus/icons-vue'
import utils from '../../utils/utils';

const showVideo = ref(false)
const theme = utils.getTheme();

defineProps<{ item: {
  bg: string;
  avatar: string;
  likes: number;
  comments: number;
  favorites: number;
  shares: number;
  author: string;
  desc: string;
  url: string;
} }>()
</script>

<style scoped>
.image-box {
  position: relative;
  height: 90%;
  /* width: 100%; */
  aspect-ratio: 9/16;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  background-color: v-bind('theme === "light" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.4)"');
}
.image-box-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 10px;
  font-size: 15px;
  gap: 8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.32);
  z-index: 3;
  box-sizing: border-box;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  color: var(--dynamic-label-color);
}
.topbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  color: var(--dynamic-label-color);
}
.topbar-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}
.image-box-actions {
  position: absolute;
  right: 8px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.image-box-actions .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-bottom: 4px;
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  cursor: pointer;
}
.action-btn span {
  font-size: 12px;
  margin-top: 1px;
}
.image-box-bottom {
  width: 100%;
  background: linear-gradient(0deg,rgba(0,0,0,0.7) 80%,rgba(0,0,0,0.1) 100%);
  padding: 8px 10px 8px 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bottom-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bottom-avatar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}
.image-box-bottom .author {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image-box-bottom .desc {
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 2.6em;
}
.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  transition: transform 0.1s;
}
.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.custom-dialog {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 99;
}
.custom-dialog-mask {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}
.custom-dialog-content {
  position: relative;
  width: 90%; max-width: 360px; aspect-ratio: 9/16;
  background: #000; border-radius: 12px; overflow: hidden;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.close-btn {
  position: absolute; top: 8px; right: 12px; color: #fff; font-size: 24px; cursor: pointer; z-index: 3;
}
@media (max-width: 600px) {
  .image-box-topbar { font-size: 12px; height: 28px; padding: 0 4px; }
  .topbar-text { font-size: 12px; }
  .image-box-actions .avatar, .bottom-avatar .avatar { width: 24px; height: 24px; }
  .action-btn { font-size: 12px; }
  .action-btn span { font-size: 10px; }
  .image-box-bottom { padding: 4px 4px 4px 4px; }
  .image-box-bottom .author { font-size: 11px; }
  .image-box-bottom .desc { font-size: 10px; }
  .custom-dialog-content { width: 100%; max-width: 100%; }
}
</style> 